<template>
  <div class="app-container">
    <div class="box">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="center-menu">
            <el-avatar :size="100" :src="myform.avatar" />
            <h3>{{ myform.nickName }}</h3>
            <ul>
              <li
                v-for="(m, i) in menus"
                :key="i"
                :class="{ active: m.isActive }"
              >
                <a href="javascript:void(0)" @click="toInfo(m)"
                  ><img :src="m.isActive ? m.picUrl2 : m.picUrl1" />{{
                    m.name
                  }}</a
                >
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="18">
          <router-view />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { onMounted } from "@vue/runtime-core";
import useUserStore from "@/store/modules/user";

const route = useRoute();
const router = useRouter();

const myform = ref({});
const menus = ref([
  {
    name: "个人中心",
    routeName: "myInfo",
    picUrl1: "/img/tool01.png",
    picUrl2: "/img/tool01_dwn.png",
    isActive: false,
  },
  {
    name: "团体信息",
    routeName: "myTeam",
    picUrl1: "/img/tool02.png",
    picUrl2: "/img/tool02_dwn.png",
    isActive: false,
  },
  {
    name: "我的赛事",
    routeName: "myMatch",
    picUrl1: "/img/tool03.png",
    picUrl2: "/img/tool03_dwn.png",
    isActive: false,
  },
  {
    name: "我的培训",
    routeName: "myTrain",
    picUrl1: "/img/tool04.png",
    picUrl2: "/img/tool04_dwn.png",
    isActive: false,
  },
]);

onMounted(() => {
  myform.value = useUserStore().user || {};

  const currMenu = _.find(menus.value, (m) => {
    return m.routeName === route.name;
  });
  if (currMenu) {
    currMenu.isActive = true;
  }
});

const toInfo = (item) => {
  _.each(menus.value, (m) => {
    m.isActive = false;
  });
  item.isActive = true;

  router.push({
    name: item.routeName,
  });
};
</script>

<style scoped lang="scss">
.app-container {
  background: #f5f7f9;
}

.grid-content {
  background: #fff;
}

:deep(.el-tabs__nav-wrap) {
  padding: 0 15px;
}
</style>
